<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Show/Hide</title>
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<style type="text/css">
		#box {
			border: 1px solid #ccc;
			background: #f1f1f1;
			width: 100px;
			height: 100px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	
	<div id="box">
		Box
	</div>
	<button id="show">Show</button>
	<button id="hide">Hide</button>
	<button id="fadeIn">Fade In</button>
	<button id="fadeOut">Fade out</button>
	<button id="fadeTo">Fade to</button>
	<button id="slideUp">Slide Up</button>
	<button id="slideDown">Slide Down</button>
	<button id="slideToggle">Slide Toggle</button>
	<button id="toggle">Toggle</button>
	<a href="http://www.google.com">Google.com</a>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('#hide').click(function() {
				$('#box').hide('slow');
			});
			$('#show').click(function() {
				$('#box').show(2000, function(){
					alert('show complete...');
				});
			});
			$('a').click(function(e){
				e.preventDefault();
				//return false;
			});
			//fadeIn
			$('#fadeIn').click(function() {
				$('#box').fadeIn('slow');
			});
			//fadeOut
			$('#fadeOut').click(function() {
				$('#box').fadeOut('slow');
			});
			//fadeTo
			$('#fadeTo').click(function() {
				$('#box').fadeTo(1500, 0.3, function(){
					$(this).css('background', '#f00');
				});
			});
			
			//slideUp
			$('#slideUp').click(function() {
				$('#box').slideUp(500)
				
			});
			$('#slideDown').click(function() {
				$('#box').slideDown(500)
				
			});
			//slideToggle
			$('#slideToggle').click(function() {
				$('#box').slideToggle(500)
				
			});
			//toggle
			$('#toggle').click(function() {
				$('#box').toggle(300);
			});
			
		});
	</script>
</body>
</html>